<template>
    <view class="content">
        <!-- 头部区域 -->
        <view class="header">
            <text class="title">新生报道服务平台</text>
            <image src="../../static/image/image/login.png" class="header-img" 
                alt="新生报道服务平台图标"></image>
        </view>
        
        <!-- 表单卡片 -->
        <view class="form-card">
            <!-- 登录表单 -->
            <view class="form-group">
                <u--input
                    v-model="form.phone"
                    placeholder="请输入已注册手机号"
                    prefixIcon="phone"
                    prefixIconStyle="font-size: 24rpx;color: #606266"
                    class="input-item"
                ></u--input>
                
                <u--input
                    v-model="form.password"
                    placeholder="请输入密码"
                    prefixIcon="lock"
                    password
                    prefixIconStyle="font-size: 24rpx;color: #606266"
                    class="input-item"
                ></u--input>
                
                <view class="form-footer">
                    <text class="forget-password"  @click="navToForget">忘记密码?</text>
                </view>
                
                <button class="login-btn" @click="handleLogin">
                    登录
                </button>
                
                <view class="register-area">
                    <text>还没有账号? </text>
                    <text class="register-link" @click="navToRegister">立即注册</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	
    export default {
        data() {
            return {
                isShow:true,
				form:{
					phone:'',
					password:''
				}
            }
        },
        onLoad() {

        },
        methods: {
            // 登录
			handleLogin() {
			  const { phone, password } = this.form;
			  console.log('★ 按钮点击已触发');
			
			  console.log('【1】phone:', phone, 'password:', password);
			  if (!phone || !password) {
			    uni.showToast({ icon: 'none', title: '请输入登录信息' });
			    return;
			  }
			
			  console.log('【2】进入手机号正则');
			  const phoneReg = /^1[3-9]\d{9}$/;
			  if (!phoneReg.test(phone)) {
			    uni.showToast({ icon: 'none', title: '请输入正确的手机号' });
			    return;
			  }
			
			  console.log('【3】进入密码长度验证');
			  if (password.length < 6) {
			    uni.showToast({ icon: 'none', title: '密码长度不能少于6位' });
			    return;
			  }
			
			  console.log('【4】即将发请求');
			  uni.request({
			    url: 'http://localhost:8080/api/student/login',
			      method: 'POST',
			      header: { 'Content-Type': 'application/x-www-form-urlencoded' },
			      data: {
			        phone: this.form.phone,
			        password: this.form.password
			      },
			    success: (res) => {
				   console.log('请求成功返回:', res);
				    const { code, message, data } = res.data;
				    if (code === 200) {
						// 登录成功分支
					  uni.setStorageSync('studentNumber', data.studentNumber);
				      // 保存用户信息
				      uni.setStorageSync('studentInfo', data);
				      // 跳转到首页（tabBar）
				      uni.switchTab({ url: '/pages/index/index' });
				    } else {
				      uni.showToast({ icon: 'error', title: message || '登录失败' });
				    }
			    },
			    fail: (err) => {
			      console.error('请求失败:', err);
			    }
			  });
			},
			/* 立即注册 */
			  navToRegister() {
			    uni.navigateTo({ url: '/pages/register/register' });
			  },
			// 忘记密码
			navToForget(){
				uni.navigateTo({ url: '/pages/forget/forget' });
			}
        },
        
    }
</script>

<style>
    .content {
            min-height: 100vh;
            background-color: #f5f7fa;
            display: flex;
            flex-direction: column;
        }
    
        /* 头部样式 */
        .header {
            height: 400rpx;
            width: 100%;
            background: linear-gradient(135deg, #4749a1 0%, #5b61b9 100%);
            position: relative;
            overflow: hidden;
        }
        
        .title {
            color: #fff;
            font-size: 48rpx;
            font-weight: bold;
            position: absolute;
            top: 220rpx;
            left: 40rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        }
        
        .header-img {
            width: 320rpx;
            height: 320rpx;
            position: absolute;
            right: -40rpx;
            top: 40rpx;
            opacity: 0.9;
            transform: rotate(15deg);
            transition: transform 0.3s ease;
        }
        
        .header-img:hover {
            transform: rotate(10deg) scale(1.05);
        }
    
        /* 表单卡片样式 */
        .form-card {
            width: 90%;
            margin: -100rpx auto 0;
            background: #fff;
            border-radius: 20rpx;
            box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
            padding: 60rpx 40rpx;
            z-index: 10;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 30rpx;
        }
        
        .input-item {
            height: 90rpx;
            border-bottom: 1px solid #f2f2f2;
            font-size: 32rpx;
            padding: 0 10rpx;
        }
        
        .form-footer {
            display: flex;
            justify-content: flex-end;
            padding: 10rpx 0;
        }
        
        .forget-password {
            color: #4749a1;
            font-size: 28rpx;
            text-decoration: none;
        }
        
        .login-btn {
            width: 100%;
            height: 96rpx;
            background: #4749a1;
            color: #fff;
            font-size: 34rpx;
            border-radius: 48rpx;
            margin-top: 20rpx;
            letter-spacing: 4rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .login-btn:hover {
            background: #5b61b9;
            transform: translateY(-2rpx);
            box-shadow: 0 6rpx 16rpx rgba(71, 73, 161, 0.3);
        }
        
        .register-area {
            display: flex;
            justify-content: center;
            margin-top: 40rpx;
            font-size: 28rpx;
            color: #666;
        }
        
        .register-link {
            color: #4749a1;
            margin-left: 10rpx;
            font-weight: 500;
        }
</style>